NodeJS+Express遇到的跨域问题

项目描述

用Express 搭建的服务开在http://localhost:3000/
前端webpack-dev-server 服务开在http://localhost:3001/

然后从前端页面给后端接口发送删除和更新数据操作时报错如下：

XMLHttpRequest cannot load http://localhost:3000/comments/597c4ef56fd60ba4ff6ec54f. Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

概念描述

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
怎么就算跨域了？
当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时，资源会发起一个跨域 HTTP 请求。
比如，站点 http://domain-a.com 的某 HTML 页面通过 <img> 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表，图像和脚本等资源。
详细的描述戳这里

解决方法

var express = require('express');
var app = express();
var router = express.Router();
var mongoose = require('mongoose');
var Comment = require('./model/comments');

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//Delete API
router.delete('/comments/:comment_id',function(req,res){

    Comment.remove({_id: req.params.comment_id},function(err,comment){
        if(err)
            res.send(err)
        res.json({ message: 'Comment has been deleted'})
    })
})

app.use('/',router);

app.listen(3000);
console.log('Listening on port 3000...');

header中的配置含义戳这里
这里是用于cors的模块：Node.js CORS middleware
（完）